<template>
	<div id="app">


		<div class="item menu">

			<ul>
				<li><router-link to="/user?name=abc&age=18">用户管理</router-link> </li>
				<li><router-link to="/role">角色管理</router-link> </li>
				<li><router-link to="/menu">菜单管理</router-link> </li>
				<li><router-link to="/news">新闻管理</router-link> </li>
			</ul>

			<div class="btn"> <el-button type="primary" size="mini" @click="toUserQuery()">用户管理带参数的Query</el-button></div>
			<div class="btn"> <el-button type="primary" size="mini" @click="toUserParam()">用户管理带参数的Params</el-button></div>
			<div class="btn"> <el-button type="primary" size="mini" @click="changeUrl('/user')">用户管理</el-button></div>
			<div class="btn"><el-button type="primary" size="mini" @click="changeUrl('/role')">角色管理</el-button></div>
			<div class="btn"><el-button type="primary" size="mini" @click="changeUrl('/menu')">菜单管理</el-button></div>
			<div class="btn"><el-button type="primary" size="mini" @click="changeUrl('/news')">新闻管理</el-button></div>


		</div>
		<div class="item content">

			<!-- 
		 
		   官方插件   Vue-Router  需要安装	
		   {   path:'/user',component:User }
		   {   path:'/role',component:Role }
		   {   path:'/menu',component:Menu }
		 router-view 根据路由url  path:'/?' 动态映射关系中找具体的组件 -->
			<router-view></router-view>


		</div>


	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
				selected: 2
			}
		},
		methods: {
			toUserQuery() {
				this.$router.replace({
					path: '/user',
					query: {
						name: 'myQuery',
						age: 18,
						address: 'ShenYang'
					},
				});
			
			},
			toUserParam() {
				this.$router.push({
					name: 'User',
					params: {
						name: 'myQuery',
						age: 18,
						address: 'ShenYang'
					},
				});
			},
			changeUrl(url) {

				// window.location = "http://localhost/#/role"
				//console.log(this.$router)
				// 编程式的路由
				// this.$router.push({ path: url });// 记录跳转的轨迹  允许前进和后退
				this.$router.replace({
					path: url
				}); // 不记录历史 

			}
		}

	}
</script>

<style scoped>
	#app {
		margin: 10px;
	}

	.item {
		vertical-align: top;
		display: inline-block;
		height: 100vh;
		border: dashed 1px grey;
	}

	.menu {
		width: 200px;
	}

	.content {
		width: 1000px;
	}

	.btn {
		margin: 10px 0 10px 20px
	}
</style>